<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <svg-icon icon-class="tree" class="icon-tree" />
    <el-button type="primary" icon="el-icon-search" @click="show">搜索</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 导入需要混入进来的模块对象
import mix from './mix.js'
import mix2 from './mix2.js'

export default {
  name: 'Dashboard',
  // 要混入到当前组件中的选项
  // mixins: [],
  mixins: [mix, mix2],
  // 如果混入的是生命周期函数，则先按照从前到后的顺序，执行每个混入中的生命周期函数，最后执行组件自己的生命周期函数
  // created() {
  //   console.log('执行了dashboard中的 created')
  // },
  computed: {
    ...mapGetters(['name'])
  },
  // 如果混入的是 methods 函数，则以组件自己的 methods 为准！
  // 如果组件中没有对应的 methods 函数，则调用 mixins 中的 methods。而且以最后的混入对象为准！
  methods: {
    // show() {
    //   console.log('执行了组件自己的show')
    // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.icon-tree {
  color: red;
}
</style>
